<!-- 店铺列表 -->
<template>
  <div id="container">
  <!-- 店铺信息 -->
<div class="store-info" id="store-info">  
   <div class="store-image" :style="`background-image:url(${store.store_image})`"></div>

      <div class="store-exp">
        <div class="store-name" style="line-height:50px;">{{store.store_name}}</div>

        <div class="inline store-phone" v-if="String(store.phone)!==''">
        <label class="store_title">电话:</label>{{store.phone}}</div>
        <div class="inline store-time" v-if="String(store.store_time)!==''">
        <label class="store_title">营业时间:</label>{{store.store_time}}
        </div>
        <div class="inline store-price" v-if="String(store.store_price)!==''">
        <label class="store_title"> 参考价格:</label>{{store.store_price}}
       </div>
        <div class="inline store-address" v-if="String(store.address)!==''">
        <label class="store_title" style="float:left;"> 地址:</label>
         <img  class="address-img" src="../assets/icon/address.png">{{store.address}}
         </div>
        <div class="inline store-talk">
        <label class="store_title"> 简介:</label>{{store.store_exp}}
        </div>
      </div>
  </div>

  <!-- 店铺商品列表 -->
  <div class="store-detail">
    <video-player  v-show="store.video.length" class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
                 @ready="playerReadied">
    </video-player>
    <div class="dish_cell"  v-for="item in goodList" :key="item.id">
        <img class="good_image" :src="item.good_image" v-if="item.good_type==1"/>
        <div class="good_word">{{item.good_name}}</div>
      </div>
  </div>
  <!-- 评论区 -->
  <c-comment></c-comment>
</div>
</template>

<script>
import * as util from '@/util/util'
import cComment from '@/components/comment'
export default {
  data () {
    return {
      store: {},
      goodList: [],
      playerOptions: {
      }
    }
  },

  methods: {
    createUserLog () {
      let param = {
        storeId: this.$route.query.store_id,
        userId: 1
      }
      util.requestApi('/thai/api/v1/create_user_log', 'post', `#`, param)
    },
    async getStoreInfo () {
      this.store = await util.requestApi('/thai/api/v1/get_store_by_id', 'get', `?store_id=${this.$route.query.store_id}`)
      this.playerOptions = {
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: this.store.video
        }]
      }
    },

    async getGoodList () {
      this.goodList = await util.requestApi('/thai/api/v1/get_store_good_by_id', 'get', `?store_id=${this.$route.query.store_id}`)
    },
    //   // player is ready
    playerReadied (player) {
      player.dimension('height', 200)
        // seek to 10s
      player.currentTime(10)
        // console.log('example 01: the player is readied', player)
    }
  },
  created () {
    // 获取店铺数据
    this.getStoreInfo()
    // 获取商品数据
    this.getGoodList()
  },
  mounted () {
    this.createUserLog()
  },
  components: {cComment},
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  }
}
</script>

<style src="../style/store.less"></style>
